<template>
    <div>
        <div class="ml-16px mr-16px content-container">
            <div class="flex items-center pt-26px pl-26px pr-26px">
                <Remind v-if="isShowRemind" @update:data="isShowRemind = !isShowRemind">
                    <template #title>
                        <b>温整提示：</b>
                    </template>
                    <template #content>
                        1、不能主动发消息给用户，仅支持回复消息，在用户未发送下一条消息给你之前，48小时内可中用户发送6条消息；<br>
                        2、用户进入消息会话页面可以发送一条消息给用户，该消息支持设置成自动发送；<br>
                        3、回复私信时，严禁发送微信号给客户，包括但不限于VX、手机号同威信等暗示/擦边球行为；<br>
                        4、因用户违规造成的限流、封号等处罚，风险损失及责任完全由用户自担。
                    </template>
                </Remind>
            </div>
            <div class="pl-36px pt-26px pr-26px text-14px font-bold level-2-title">
                触发数据
            </div>
            <div class="flex pl-26px pt-16px pr-26px trigger-data">
                <div class="flex flex-col justify-center w-240px h-180px mr-12px trigger-data-left">
                    <p>{{ state.triggerDatas[0].name }}<el-tooltip placement="top"
                            :content="state.triggerDatas[0].content">
                            <svg-icon size="14px" icon-class="information-2-fill" class="ml-5px"></svg-icon>
                        </el-tooltip></p>
                    <div class="flex items-center mt-25px mb-25px">
                        <div class="flex flex-center icon"><svg-icon size="20px" icon-class="yuan"></svg-icon></div>
                        <b>{{ state.triggerDatas[0].value }}</b>
                    </div>
                    <p>昨日新增：<b>36</b> 次</p>
                </div>
                <div class="flex-1 h-180px trigger-data-right">
                    <ul>
                        <li v-for="item in state.triggerDatas.slice(1)" :key="item.id">
                            <p>{{ item.name }}<el-tooltip placement="top" :content="item.content"
                                    v-if="item.content != ''">
                                    <svg-icon size="14px" icon-class="information-2-fill" class="ml-5px"></svg-icon>
                                </el-tooltip></p>
                            <span>{{ item.value }}</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="pl-36px pt-26px pr-26px text-14px font-bold level-2-title">
                智能接待
            </div>
            <div class="flex pl-26px pt-16px pr-26px pb-26px intelligent-reception">
                <div class="flex justify-between items-center item">
                    <div class="flex items-center">
                        <div class="flex flex-center icon">
                            <i></i>
                        </div>
                        <div>私信</div>
                    </div>
                    <button>去设置</button>
                </div>
                <div class="flex justify-between items-center item">
                    <div class="flex items-center">
                        <div class="flex flex-center icon">
                            <i></i>
                        </div>
                        <div>进入会话</div>
                    </div>
                    <button>去设置</button>
                </div>
                <div class="flex justify-between items-center item">
                    <div class="flex items-center">
                        <div class="flex flex-center icon">
                            <i></i>
                        </div>
                        <div>评论</div>
                    </div>
                    <button>去设置</button>
                </div>
            </div>
        </div>
        <div class="ml-16px mr-16px mt-26px mb-26px content-container">
            <div class="pl-36px pt-26px pr-26px pb-26px text-14px font-bold level-2-title">
                数据统计分析
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
const isShowRemind = ref(true)

const state = reactive({
    triggerDatas: [
        {
            id: 1,
            name: '商机线索总量',
            value: 86,
            content: '私信/评论/拓客裂变/留资/电话等行为线索量'
        },
        {
            id: 2,
            name: '私信量',
            value: 128,
            content: ''
        },
        {
            id: 3,
            name: '进入会话量',
            value: 90,
            content: ''
        },
        {
            id: 4,
            name: '评论量',
            value: 279,
            content: ''
        },
        {
            id: 5,
            name: '进入主页量',
            value: 62,
            content: ''
        },
        {
            id: 6,
            name: '电话量',
            value: 25,
            content: ''
        },
        {
            id: 7,
            name: '私信留电话量',
            value: 43,
            content: ''
        },
        {
            id: 8,
            name: '主页留电话量',
            value: 17,
            content: ''
        },
        {
            id: 9,
            name: '其他留电话量',
            value: 56,
            content: ''
        },
    ]
})
</script>

<style lang="scss" scoped>
.trigger-data {
    &-left {
        border-radius: 6px;
        padding-left: 36px;
        background-color: var(--mainBg);

        p {
            font-size: 14px;
            color: #999;

            b {
                font-size: 18px;
                font-family: "DIN Web";
                color: var(--title-color);
            }
        }

        .icon {
            width: 36px;
            height: 36px;
            margin-right: 10px;
            border-radius: 50%;
            background-image: -moz-linear-gradient(-90deg, rgb(64, 127, 255) 0%, rgb(64, 176, 255) 100%);
            background-image: -webkit-linear-gradient(-90deg, rgb(64, 127, 255) 0%, rgb(64, 176, 255) 100%);
            background-image: -ms-linear-gradient(-90deg, rgb(64, 127, 255) 0%, rgb(64, 176, 255) 100%);

            &+b {
                font-size: 32px;
                font-family: "DIN Web";
                color: var(--title-color);
            }
        }
    }

    &-right {
        border-radius: 6px;
        background-color: var(--mainBg);

        ul {
            overflow: hidden;
            height: 100%;

            li {
                width: 25%;
                height: 50%;
                float: left;
                padding: 0 0 0 36px;
                display: flex;
                flex-direction: column;
                justify-content: center;

                p {
                    font-size: 14px;
                    color: #999;
                }

                span {
                    font-size: 18px;
                    font-weight: bold;
                    font-family: "DIN Web";
                    color: var(--title-color);
                    margin-top: 12px;
                }
            }
        }
    }
}

.intelligent-reception {
    .item {
        width: 300px;
        height: 80px;
        border-radius: 6px;
        margin-right: 12px;
        padding: 0 20px;
        position: relative;
        background-image: -moz-linear-gradient(-90deg, rgb(255, 142, 80) 0%, rgb(255, 177, 100) 100%);
        background-image: -webkit-linear-gradient(-90deg, rgb(255, 142, 80) 0%, rgb(255, 177, 100) 100%);
        background-image: -ms-linear-gradient(-90deg, rgb(255, 142, 80) 0%, rgb(255, 177, 100) 100%);

        .icon {
            width: 50px;
            height: 50px;
            border-radius: 16px;
            background-color: #fff;
            margin-right: 15px;

            &>i {
                width: 30px;
                height: 26px;
                background: url('@/assets/images/email.png') no-repeat 0 0;
                background-size: contain;
            }

            &+div {
                font-size: 14px;
                font-weight: bold;
                color: #fff;
            }
        }

        button {
            font-size: 14px;
            height: 32px;
            padding: 0 18px;
            color: #ff823d;
            border-radius: 16px;
            background: #fff;
            position: relative;
            z-index: 9;
        }

        &:nth-child(2) {
            background-image: -moz-linear-gradient(-90deg, rgb(248, 118, 117) 0%, rgb(255, 144, 144) 100%);
            background-image: -webkit-linear-gradient(-90deg, rgb(248, 118, 117) 0%, rgb(255, 144, 144) 100%);
            background-image: -ms-linear-gradient(-90deg, rgb(248, 118, 117) 0%, rgb(255, 144, 144) 100%);

            .icon {
                i {
                    width: 30px;
                    height: 29px;
                    background: url('@/assets/images/talk.png') no-repeat 0 0;
                    background-size: contain;
                }
            }

            button {
                color: #f58584;
            }
        }

        &:nth-child(3) {
            background-image: -moz-linear-gradient(-90deg, rgb(83, 182, 137) 0%, rgb(114, 197, 160) 100%);
            background-image: -webkit-linear-gradient(-90deg, rgb(83, 182, 137) 0%, rgb(114, 197, 160) 100%);
            background-image: -ms-linear-gradient(-90deg, rgb(83, 182, 137) 0%, rgb(114, 197, 160) 100%);

            .icon {
                i {
                    width: 26px;
                    height: 26px;
                    background: url('@/assets/images/comment.png') no-repeat 0 0;
                    background-size: contain;
                }
            }

            button {
                color: #53b78a;
            }
        }

        &::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            z-index: 0;
            width: 172px;
            height: 80px;
            background: url('@/assets/images/tm-bg.png') no-repeat 0 0;
        }
    }
}
</style>